<template>
    <div>
        <!-- 显示通用素材上传 -->
        <el-dialog title="请选择" :visible.sync="visible" :before-close="handleClose" width="80%"
            :modal-append-to-body="false" center>
            <el-row>
                <el-col :span="24">
                    <show-upload-file ref="showUpload" v-bind="$attrs"></show-upload-file>
                </el-col>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="uploadFile()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import ShowUploadFile from "@/views/kanke/textbook/material/index";
export default {
    name: "UploadFile",
    components: {
        ShowUploadFile,
    },
    props: {
        visible: {
            type: Boolean,
            default: false
        },
    },
    data() {
        return {
            loading: false,
            multipleVal: [], //选择的图片或文件地址数组
        }
    },
    methods: {
        handleClose() {
            this.$emit('update:visible', false);
        },
        //获取子组件的值 可以为图片、视频、音频等
        uploadFile() {
            let val = this.$refs.showUpload.multipleVal;
            let allMultipleVal = this.$refs.showUpload.allMultipleVal;
            console.log('选择的文件:', val);
            if (val.length == 0) {
                this.$message.error('未选择任何文件')
            }
            // 查看文件中是否有未转码的文件
            let hasUnTranFile = false;
            allMultipleVal.map(row => {
                if ([2, 3].includes(row.type) && row.transcode_type == 1) {
                    hasUnTranFile = true
                }
            })

            if (hasUnTranFile) {
                this.$message.error('有转码中的文件,请重新选择')
                return;
            }
            this.$emit('update:visible', false);

            //父组件调用方法  
            this.$emit('childFileEvent', val, allMultipleVal);  //监听子组件该事件
            // if(val.length>1){
            //     this.$message.error('不能多选')
            // }
            // if(val.length==1){
            //     this.form.url = val[0]  //若选择一张
            // }
        },
    }
}
</script>

<style scoped></style>